<!--  -->
<template>
  <a-modal
    @cancel="modalClose"
    :visible="visible"
    width="360px"
    dialogClass="check-modal"
    :footer="null"
    :centered="true"
  >
    <div class="check-wrap">
      <span
        class="course-item"
        v-for="item in courseList"
        :key="item.id"
        @click="okClickHandle(item)"
      >
        {{ item.title }}
      </span>
    </div>
  </a-modal>
</template>

<script>
import { Modal } from "ant-design-vue";
export default {
  name: "choseModal",
  components: {
    AModal: Modal,
  },
  data() {
    return {};
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    courseList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {},
  watch: {
    visible: function(newVal, oldVal) {
      this.$lay.show()
      setTimeout(() => {
        this.$lay.hide()
      }, 300)
    }
  },
  methods: {
    modalClose() {
      this.$emit("update:visible", false);
    },
    okClickHandle(item) {
      this.$emit("choseClick", item);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */

.check-wrap {
  text-align: center;
  padding: 20px 0;
  .course-item {
    display: block;
    margin: 40px 0 20px;
    font-size: 24px;
    cursor: pointer;
    &:hover {
      color: @primary-color;
    }
  }
}
</style>
